import { Pagination, Form, Input, Button, Table, Popconfirm, Space } from 'antd'
// import '../Role_management/role_management.scss'
import http from '../../utils/http'
import { useEffect, useState } from 'react';

import store from '../../store/index'
const OperTable = () => {
    const [form] = Form.useForm();
    const [searchForm] = Form.useForm();
    //后端时间戳转时间的方法
    const toTimes = (value) => {
        if (value) {
            let date = new Date(value)
            let y = date.getFullYear()  //获取年份
            let m = date.getMonth() + 1  //获取月份
            m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
            let d = date.getDate()  //获取日期
            d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
            return y + "-" + m + "-" + d
        }
        else {
            return null
        }
    }
    //获取数据
    const [data, setData] = useState([])
    const [total, setTotal] = useState(0)
    useEffect(() => {
        getData()
    }, [])
    const getData = () => {
        http({
            url: '/opeLogManage/opeLogManageList'
        }).then((res) => {
            if (res.code === 200) {
                if (res.data.records) {
                    setTotal(res.data.total)
                    showTable(res.data.records)
                    // sessionStorage.setItem('roleTable', JSON.stringify(arr));
                }
            }
        })
    }
    //渲染表格
    const showTable = (data) => {
        let arr = data.map((v, i) => {
            return {
                key: v.opId,
                opName: v.opName,
                adId: v.adId,
                opId: v.opId,
                // opDescribe: v.opDescribe,
                opTime: toTimes(v.opTime)
            }
        })
        setData(arr);
    }
    const time = () => {
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        mm = mm < 10 ? '0' + mm : mm
        let dd = new Date().getDate();
        dd = dd < 10 ? '0' + dd : dd
        let hh = new Date().getHours();
        let mf =
            new Date().getMinutes() < 10
                ? "0" + new Date().getMinutes()
                : new Date().getMinutes();
        let ss =
            new Date().getSeconds() < 10
                ? "0" + new Date().getSeconds()
                : new Date().getSeconds();
        let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
        return gettime
    }
    const search = () => {
        let Inp = searchForm.getFieldsValue(true).username
        console.log(Inp)
        let chajson = { 'opName': Inp }
        console.log(chajson)
        http({
            url: '/opeLogManage/opeLogManageList',
            // method: 'post',
            params: chajson
        }).then((res) => {
            console.log('cha', res)
            if (res.data.records) {
                showTable(res.data.records)
            }
            else {
                setData([]);
            }
        })
        //    const values={'opName':'登录','adId':'1','opIp':'1802213','opTime':time()}
        //    console.log(values)
        //    http({
        //         url: '/opeLogManage/addopeLogManage',
        //         method: 'post',
        //         data: values
        //     }).then((res) => {
        //         console.log('cha', res)
        //         if (res.data.records) {
        //             showTable(res.data.records)
        //         }
        //     })
    }
    const resize = () => {
        searchForm.getFieldsValue(true).username = ''
        getData()
    }
    const columns = [
        {
            title: '资源名称',
            dataIndex: 'opName',
            render: (text) => <a>{text}</a>,
        },
        // {
        //     title: '操作类型',
        //     dataIndex: 'opType',
        // },
        {
            title: '操作人',
            dataIndex: 'adId',
        },
        {
            title: '请求IP',
            dataIndex: 'opId',
        },
        // {
        //     title: '执行结果',
        //     dataIndex: 'outcome',
        // },
        // {
        //     title: '应用描述',
        //     dataIndex: 'opDescribe',
        // },
        {
            title: '操作时间',
            dataIndex: 'opTime',
        }
    ];
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            // disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    //改变页码
    function onChange(pageNumber) {
        console.log('Page: ', pageNumber);
    }
    return <div className='roleContent'>
        <Form form={form} name="horizontal_login" layout="inline" className='title'>
            <Form.Item
                name="username">
                <div className='kuai'>
                    <span></span>
                    <span>操作日志管理</span>
                </div>
            </Form.Item>
        </Form>
        <div className='biao'>
            <Form form={searchForm} name="horizontal_login" layout="inline" className='Role'>
                <Form.Item
                    name="username"
                    label='资源名称'
                ><Input placeholder='请输入资源名称' />
                </Form.Item>
                <Form.Item className='btn'>
                    <div>
                        <Button className='cha'
                            type="primary"
                            onClick={search}>查询</Button>
                        <Button className='resize' onClick={resize} type="primary">重置</Button>
                    </div>

                </Form.Item>
            </Form>
            <Table className='table1'
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
            />
            <Pagination className='page'
                total={total} onChange={onChange} />
        </div>
    </div>
};
export default OperTable